<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>API 测试页面</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
    }
    .section {
      margin-bottom: 30px;
      padding: 20px;
      border: 1px solid #ddd;
      border-radius: 5px;
    }
    label {
      display: block;
      margin: 10px 0 5px;
    }
    input, textarea, select {
      width: 100%;
      padding: 8px;
      margin-bottom: 10px;
      border: 1px solid #ddd;
      border-radius: 4px;
    }
    button {
      padding: 8px 16px;
      background-color: #007bff;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    .response {
      margin-top: 20px;
      padding: 10px;
      background-color: #f5f5f5;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <h1>API 测试页面</h1>

  <!-- 聊天测试 -->
  <div class="section">
    <h2>聊天测试</h2>
    <label for="character">选择角色:</label>
    <select id="character">
      <option value="character1">角色1</option>
      <option value="character2">角色2</option>
    </select>

    <label for="message">消息内容:</label>
    <textarea id="message" rows="3"></textarea>

    <button id="sendMessageBtn">发送消息</button>

    <div class="response" id="chatResponse"></div>
  </div>

  <!-- 角色设置测试 -->
  <div class="section">
    <h2>角色设置测试</h2>
    <label for="characterSettings">选择角色:</label>
    <select id="characterSettings">
      <option value="character1">角色1</option>
      <option value="character2">角色2</option>
    </select>

    <label for="name">角色名称:</label>
    <input type="text" id="name">

    <label for="personality">性格特征:</label>
    <input type="text" id="personality">

    <label for="style">语言风格:</label>
    <input type="text" id="style">

    <button id="saveCharacterSettingsBtn">保存设置</button>
    <button id="getCharacterSettingsBtn">获取设置</button>

    <div class="response" id="characterSettingsResponse"></div>
  </div>

  <!-- 用户设置测试 -->
  <div class="section">
    <h2>用户设置测试</h2>
    <label for="userName">用户名:</label>
    <input type="text" id="userName">

    <label for="userAvatar">用户头像:</label>
    <input type="file" id="userAvatar" accept="image/*">

    <button id="saveUserSettingsBtn">保存用户设置</button>
    <button id="getUserSettingsBtn">获取用户设置</button>

    <div class="response" id="userSettingsResponse"></div>
  </div>

  <script type="module">
    import ApiService from './utils/api.js';

    // 聊天测试
    async function sendMessage() {
      const character = document.getElementById('character').value;
      const message = document.getElementById('message').value;
      
      try {
        const response = await ApiService.getChatResponse(message, character);
        document.getElementById('chatResponse').innerText = response;
      } catch (error) {
        document.getElementById('chatResponse').innerText = '错误: ' + error.message;
      }
    }

    // 角色设置测试
    async function saveCharacterSettings() {
      const character = document.getElementById('characterSettings').value;
      const settings = {
        name: document.getElementById('name').value,
        personality: document.getElementById('personality').value,
        style: document.getElementById('style').value
      };

      try {
        const result = await ApiService.saveCharacterSettings(character, settings);
        document.getElementById('characterSettingsResponse').innerText = 
          result ? '保存成功' : '保存失败';
      } catch (error) {
        document.getElementById('characterSettingsResponse').innerText = 
          '错误: ' + error.message;
      }
    }

    async function getCharacterSettings() {
      const character = document.getElementById('characterSettings').value;
      
      try {
        const settings = await ApiService.getCharacterSettings(character);
        document.getElementById('characterSettingsResponse').innerText = 
          JSON.stringify(settings, null, 2);
      } catch (error) {
        document.getElementById('characterSettingsResponse').innerText = 
          '错误: ' + error.message;
      }
    }

    // 用户设置测试
    async function saveUserSettings() {
      const settings = {
        name: document.getElementById('userName').value,
        avatar: document.getElementById('userAvatar').files[0]
      };

      try {
        if (settings.avatar) {
          settings.avatar = await ApiService.uploadFile(settings.avatar);
        }
        const result = await ApiService.saveUserSettings(settings);
        document.getElementById('userSettingsResponse').innerText = 
          result ? '保存成功' : '保存失败';
      } catch (error) {
        document.getElementById('userSettingsResponse').innerText = 
          '错误: ' + error.message;
      }
    }

    async function getUserSettings() {
      try {
        const settings = await ApiService.getUserSettings();
        document.getElementById('userSettingsResponse').innerText = 
          JSON.stringify(settings, null, 2);
      } catch (error) {
        document.getElementById('userSettingsResponse').innerText = 
          '错误: ' + error.message;
      }
    }

    // 添加事件监听器
    document.getElementById('sendMessageBtn').addEventListener('click', sendMessage);
    document.getElementById('saveCharacterSettingsBtn').addEventListener('click', saveCharacterSettings);
    document.getElementById('getCharacterSettingsBtn').addEventListener('click', getCharacterSettings);
    document.getElementById('saveUserSettingsBtn').addEventListener('click', saveUserSettings);
    document.getElementById('getUserSettingsBtn').addEventListener('click', getUserSettings);
  </script>
</body>
</html>
